<template>
    <popup ref="popupRef" :title="popupTitle" width="500px" @confirm="handleConfirm" :async="true" @close="popupClose">
        <div class="pr-8">
            <el-form ref="formRef" :model="formData" label-width="80px" :rules="formRules">
                <el-form-item v-if="props.value==1" label="审核意见">
                    <el-input v-model="formData.reason" type="textarea" placeholder="请填写审核意见" :rows="4" />
                </el-form-item>
				<el-form-item v-if="props.value==2" label="审核意见" prop="reason">
				    <el-input v-model="formData.reason" type="textarea" placeholder="请填写审核意见" :rows="4" />
				</el-form-item>
				<!-- <el-form-item v-if="props.value==1" label="收佣比例" prop="commission_rate">
				    <el-input v-model="formData.commission_rate" type="number" style="width: 50%; margin-right: 10px;" placeholder="请填写收佣比例"></el-input>
					<span> % </span>
				</el-form-item> -->
            </el-form>
        </div>
    </popup>
</template>
<script lang="ts" setup>
	import Popup from '@/components/popup/index.vue'
	import type { FormInstance, FormRules } from 'element-plus'
	import feedback from '@/utils/feedback'
	const formRef = shallowRef<FormInstance>()
	const props = defineProps({
		show: {
			type: Boolean,
			required: true
		},
		value: {
			type: [Number, String],
			required: true
		}
	})

	const emit = defineEmits<{
		(event: 'update:show', value: boolean): void
		(event: 'confirm', value: any): void
	}>()

	const popupTitle = computed(() => {
		return `审核${props.value==1?'通过':props.value==2?'驳回':''}`
	})

	const formData = reactive({
		check_status: 0,
		reason: '',
		commission_rate: 0
	})
	
	const popupRef = shallowRef<InstanceType<typeof Popup>>()

	const formRules: FormRules = {
		reason: [
			{
				required: true,
				message: '请填写审核意见'
			}
		],
		commission_rate: [
			{
				required: false,
				message: '请填写收佣比例'
			}
		]
	}

	const handleConfirm = async () => {
		await formRef.value?.validate()
		emit('confirm', {check_status:props.value,reason:formData.reason,commission_rate:Number(formData.commission_rate)/100})
	}

	const popupClose = () => {
		emit('update:show', false)
		formRef.value?.resetFields()
	}

	watch(
		() => props.show,
		(val) => {
			if (val) {
				popupRef.value?.open()
			} else {
				popupRef.value?.close()
			}
		}
	)
</script>
